<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>商品列表</title>
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <style>
	.layui-table-cell{
	height: 50px
	}
</style>
</head>

<body>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name"  placeholder="请输入商品名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<button type="button" class="layui-btn" id="uploadImg" style="display: none">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>

<table id="demo" lay-filter="test"></table>
 
<script src="../layui/layui.js"></script>
<script>
var goodsId = 0;
layui.use(['table','form','jquery','upload'], function(){
  var table = layui.table;
  var form = layui.form;
  var $ = layui.jquery;
  var upload = layui.upload;
  
  upload.render({
    elem: '#uploadImg' //绑定元素
    ,url: 'GoodsImgServlet' //上传接口
    ,data:{
    	id:function(){
    		return goodsId
    	}
    }
    ,done: function(res){
	      //上传完毕回调
  		table.reload('demo');//重载表格
  		layer.msg('图片更新成功');
  		//location.reload()
    }
    ,error: function(){
      //请求异常回调
    }
  }); 
   
  
  //渲染表格
  table.render({
    elem: '#demo'
    ,toolbar: '#toolbarDemo'//绑定头工具栏
    ,height: 512
    ,url: 'GoodsServlet?method=findAll' //数据接口
    ,page: true //开启分页
    ,limit:5
    ,cols: [[ //表头
      {field: 'id', title: 'ID'}
      ,{field: 'goodsName', title: '商品名称'}
      ,{field: 'fileName', title: '图片',templet: '<div><a href="javascript:void(0)" title="更换图片" onclick="showUpload({{d.id}})" style="display:block;width:50px;height:50px"><img    style="width:50px;height:50px" src="../images/{{d.fileName}}" /></a></div>'}
      ,{field: 'goodsDesc', title: '描述'}
      ,{field: 'price', title: '价格'}
      ,{field: 'stock', title: '库存'} 
      ,{field: 'status', title: '状态',templet:function(d){
    	  if(d.status==1){
    		  return '<input type="checkbox" value="'+d.id+'" lay-skin="switch" lay-filter="sale" lay-text="上架|下架" checked>'
    	  }else{
    		  return '<input type="checkbox" value="'+d.id+'"  lay-skin="switch" lay-filter="sale" lay-text="上架|下架">'
    	  }
      }} 
      ,{fixed: 'right', title: '操作', width:200, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
//头工具栏触发事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':
    	  layer.open({
       		  type: 1,
       		  title:'添加商品',
       		  content: $('#add') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
       		});
      break;
      case 'delete':
        layer.msg('删除');
      break;
      case 'update':
        layer.msg('编辑');
      break;
    };
  });
//行工具条事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
      //do somehing
      	//数据回显
      	form.val("detail", data);
    	layer.open({
   		  type: 1,
   		  title:'商品详情',
   		  content: $('#detail') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
   		});
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
    	  $.post(
    		'GoodsServlet?method=del',
    		{
    			id:data.id
    		},function(res){
    			obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
    		}
    	  )
    	  layer.close(index);
    	  layer.msg('删除成功')
      });
    } else if(layEvent === 'edit'){ //编辑
      //do something
      //数据回显
      	form.val("edit", data);
      layer.open({
   		  type: 1,
   		  title:'修改商品',
   		  content: $('#edit') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
   		});
      
      //同步更新缓存对应的值
      obj.update({
        username: '123'
        ,title: 'xxx'
      });
    } else if(layEvent === 'LAYTABLE_TIPS'){
      layer.alert('Hi，头部工具栏扩展的右侧图标。');
    }
  });
  

  
//监听条件查询提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    //表格重载
    table.reload('demo', {
		where: data.field //设定异步数据接口的额外参数
  //,height: 300
	});
    return false;
  });
  
//监听修改表单提交
  form.on('submit(editBtn)', function(data){
    //将数据提交到后台
       $.post(
    	'GoodsServlet?method=edit',
    	data.field,
    	function(res){
    		layer.close(layer.index);//关闭弹窗
    		table.reload('demo');//重载表格
    		layer.msg('修改成功');
    	},'text' 
    );  
    return false;
  });
  
//监听添加表单提交
  form.on('submit(addBtn)', function(data){
    //将数据提交到后台
       $.post(
    	'GoodsServlet?method=add',
    	data.field,
    	function(res){
    		layer.close(layer.index);//关闭弹窗
    		table.reload('demo');//重载表格
    		layer.msg('添加成功');
    	},'text' 
    );  
    return false;
  });
  
  //监听switch开关
  form.on('switch(sale)', function(data){
	  console.log(data.value); //开关value值，也可以通过data.elem.value得到
	  $.post(
		'GoodsServlet?method=sale',
		{
			id:data.value
		},function(res){
			if(res=="success"){
				layer.msg('操作成功')
			}
		}
	  );
	}); 
  
});
</script>
</body>

<form id="detail" class="layui-form" style="display: none" action="" lay-filter="detail">
  <div class="layui-form-item">
    <label class="layui-form-label">商品编号</label>
    <div class="layui-input-inline">
      <input type="text" name="id"  readonly="readonly"  class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsName" readonly="readonly"   class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品描述</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsDesc"  readonly="readonly"  class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="text" name="price" readonly="readonly"   class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-inline">
      <input type="text" name="stock" readonly="readonly"   class="layui-input">
    </div>
  </div>
</form>

<form id="edit" class="layui-form" style="display: none" action="" lay-filter="edit">
  <div class="layui-form-item">
    <label class="layui-form-label">商品编号</label>
    <div class="layui-input-inline">
      <input type="text" name="id"  readonly="readonly" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsName"  placeholder="请输入商品名称" required="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品描述</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsDesc"  placeholder="请输入商品描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="number" name="price" min="0"  placeholder="请输入商品价格" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-inline">
      <input type="number" name="stock" min="0"  placeholder="请输入商品库存" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="editBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<form id="add" class="layui-form" style="display: none" action="" lay-filter="add">
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsName"  placeholder="请输入商品名称" required="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品描述</label>
    <div class="layui-input-inline">
      <input type="text" name="goodsDesc"  placeholder="请输入商品描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-inline">
      <input type="number" name="price" min="0"  placeholder="请输入商品价格" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-inline">
      <input type="number" name="stock" min="0"  placeholder="请输入商品库存" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">确定</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
	function showUpload(id){
		layui.use(['jquery','upload','table'],function(){
			var $ = layui.jquery
			var upload = layui.upload
			var table = layui.table
			goodsId = id;
			$("#uploadImg").click()
		})
		
	}
	
</script>
</html>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 头工具栏 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>